<template>
  <div class="card">
    <div class="title">{{programs.title}}</div>
    <div class="show-wrapper">
      <ul class="show-list" v-if="programs.shows">
        <li v-for="(item, index) in programs.shows" :key="index" class="show-item">
          <span class="depart">{{programs.shows[index].department}}</span>
          <img :src="programs.shows[index].thumb" :alt="programs.shows[index].name" class="thumb" width="100%"/>
          <span class="name">{{programs.shows[index].name}}</span>
          <button class="vote-btn" type="button" @click="showConfirm(programs.shows[index].name)">投TA一票</button>
          <span class="count">已获得 <span>{{programs.shows[index].score}}</span> 票</span>
        </li>
      </ul>
    </div>
    <confirm :selectName="inputName" v-model="sendVal"></confirm>
  </div>
</template>

<script>
  import confirm from '../confirm/confirm'

  export default {
    name: 'programs',
    data() {
      return {
        sendVal: false,
        inputName: ''
      }
    },
    props: {
      programs: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    methods: {
      showConfirm(name) {
        this.sendVal = true
        this.inputName = name
      },
      refreshPrograms() {
        this.$parent._getPrograms()
      }
    },
    components: {
      confirm
    }
  }
</script>

<style lang="scss">
  @import '../../common/sass/var';
  @import '../../common/sass/mixin';

  .show-wrapper {
    padding: 0 10px;

    .show-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .show-item {
        position: relative;
        width: 48%;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-radius: 8px;
        box-shadow: #F48CA7 0 2px 8px 0;
        text-align: center;

        &:nth-of-type(even) {
          margin-right: 0;
        }

        .thumb {
          box-sizing: border-box;
          border: 2px solid $color-pink;
          border-radius: 8px;
        }

        .name {
          display: block;
          margin: 15px 0;
        }

        .vote-btn {
          display: block;
          width: 100px;
          height: 30px;
          margin: 0 auto 15px;
          line-height: 30px;
          background: $color-pink;
          border: 0;
          border-radius: 15px;
          color: #fff;
          font-size: $font-base;
          outline: none;
          text-align: center;
          text-decoration: none;
          transition: all ease .5s;

          &:active {
            background: darken($color-pink, 15%);
          }
        }

        .depart {
          position: absolute;
          left: 50%;
          transform: translate(-50%, 0);
          min-width: 60px;
          height: 24px;
          padding: 0 10px;
          overflow-x: auto;
          line-height: 24px;
          background: $color-pink;
          border-bottom-left-radius: 6px;
          border-bottom-right-radius: 6px;
          color: #fff;
          font-size: $font-small;
        }

        .count {
          span {
            color: $color-pink;
          }
        }
      }
    }
  }
</style>
